<template>
  <div>
    <h3>换相记录</h3>
    <x-button type="primary" @click.native="back">返回</x-button>
    <group>
      <calendar v-model="currentStartDate" title="开始日期：" style="font-size:18px;"></calendar>
      <calendar v-model="currentEndDate" title="结束日期：" style="font-size:18px;"></calendar>
      <card>
        <div slot="content" class="card-flex card-content">
          <div class="vux-1px-r">
            归属地：
            <br />
            <span>{{location}}</span>
          </div>
          <div>
            台区号：
            <br />
            <span>{{areaNo}}</span>
          </div>
        </div>
      </card>
    </group>
    <group>
      <x-table>
        <thead>
          <tr class="table-header">
            <th>换相器</th>
            <th>时间</th>
            <th>换相至</th>
            <th>负载电流</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="data.length==0" class="table">
            <td>暂无数据</td>
            <td>暂无数据</td>
            <td>暂无数据</td>
            <td>暂无数据</td>
          </tr>
          <tr v-for="item in data" :key="item.id" class="table">
            <td>{{item.machineNo}}</td>
            <td>{{item.time}}</td>
            <td>
              <span v-if="item.ToL==0">A</span>
              <span v-if="item.ToL==1">B</span>
              <span v-if="item.ToL==2">C</span>
              <span v-if="item.ToL==3">D</span>
            </td>
            <td>{{item.I}}A</td>
          </tr>
        </tbody>
      </x-table>
    </group>
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :total="total*size" :pager-count="5" :page-size="size" @current-change="currentChange" @prev-click="currentChange" @next-click="currentChange">
      </el-pagination>
    </div>
    <loading :show="showLoading" text="加载中..."></loading>
  </div>
</template>

<script>
import { Group, XButton, Calendar, Card, XTable, Datetime ,Loading} from "vux";
import Http from "./../unit/http.js";

export default {
  components: {
    Group,
    XButton,
    Calendar,
    Card,
    XTable,
    Datetime,Loading
  },
  data() {
    return {
      currentStartDate: "",
      currentEndDate: "",
      showLoading:false,

      id: 0,
      startDate: "",
      endDate: "",
      page: 1,

      data: [],
      total:0,
      size:0,
      location: 0,
      areaNo: 0
    };
  },

  mounted() {
    this.getCurrentDate();
    this.getId();
    this.getData(this.id, this.startDate, this.endDate, this.page);
  },

  watch: {
    //监听时间，更改对应的格式
    currentStartDate: function() {
      this.startDate =
        this.currentStartDate + " " + "00" + ":" + "00" + ":" + "00";
      this.getData(this.id, this.startDate, this.endDate, this.page);
    },
    currentEndDate: function() {
      this.endDate = this.currentEndDate + " " + 23 + ":" + 59 + ":" + 59;
      this.getData(this.id, this.startDate, this.endDate, this.page);
    },
    data: function() {
      this.showLoading = false;
      
    }
  },

  methods: {
    getId() {
      this.id = this.$route.query.id;     
    },

    back() {
      this.$router.go(-1);
    },

    getCurrentDate() {//时间格式化
      var now = new Date();
      var year = now.getFullYear(); //年
      var month = now.getMonth() + 1; //月
      var day = now.getDate(); //日
      //var hh = now.getHours();  //时
      //var mm = now.getMinutes();  //分
      this.currentStartDate = year + "-" + month + "-" + day;
      this.currentEndDate = year + "-" + month + "-" + day;

      this.startDate = this.currentStartDate + " " + "00" + ":" + "00" + ":" + "00";
      this.endDate = this.currentEndDate + " " + 23 + ":" + 59 + ":" + 59;
    },

    currentChange(val) {//点击下一页
      this.page = val;
      this.getData(this.id, this.startDate, this.endDate, this.page);
    },

    getData(id, startDate, endDate, page) {
      this.showLoading = true;
      const self = this;
      const param = {
        areaId: id,
        startDate: startDate,
        endDate: endDate,
        page: page
      };
      const url = "/yitai/admin/areaChangeRecord";
      const success = function(response) {

        self.data = response.data.info;  
        self.total = response.data.total;
        self.size = response.data.size;
        self.location = response.data.info[0].location;
        self.areaNo = response.data.info[0].areaNo;
      };
      const failed = function(response) {
 
      };
      Http.http(url, param, success, failed);
    }
  }
};
</script>






<style scoped >
h3 {
  margin-bottom: 20px;
}
button.weui-btn {
  font-size: 18px;
}
.weui-btn_primary {
  background-color: #005e9c;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
  color: rgba(255, 255, 255, 0.6);
  background-color: #034b7a;
}
.weui-btn_disabled.weui-btn_primary {
  background-color: #3978a1;
}

.card-flex {
  display: flex;
}
.card-content {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-flex > div {
  flex: 1;
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
}
.card-flex span {
  color: #005e9c;
}
.vux-1px-r:after {
  border-right: 1px solid #005e9c !important;
}

.vux-table:after {
  border-top: 1px solid #888888;
}
.vux-table td:before,
.vux-table th:before {
  border-bottom: 1px solid #888888;
}
.vux-table td:after,
.vux-table th:after {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid #888888;
  color: #c7c7c7;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}

.table-header th {
  font-weight: bold;
  font-size: 17px;
}
.table {
  font-size: 18px;
}
.table td {
  padding: 8px 2px;
  text-align: center;
  line-height: 30px;
}

.pagination {
  padding-top: 15px;
  display: flex;
  justify-content: center;
}
</style>